<%--@elvariable id="friendList" type="java.util.List"--%>
<%--@elvariable id="hasCareer" type="java.lang"--%>
<%--@elvariable id="friend" type="com.genghis.ptas.friend.entity.Friend"--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-datepicker/css/datepicker.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/css/pages/search.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <link href="css/global/myStyle.css" rel="stylesheet" type="text/css"/>

</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN CONTENT -->
<div class="page-content">
    <%--<div class="row">--%>
    <%--<div class="col-md-12">--%>
    <%--<!-- BEGIN PAGE TITLE & BREADCRUMB-->--%>
    <%--<h3 class="page-title">--%>
    <%--好友列表--%>
    <%--<small>我的好友</small>--%>
    <%--</h3>--%>
    <%--<ul class="page-breadcrumb breadcrumb">--%>
    <%--<li class="btn-group">--%>
    <%--</li>--%>
    <%--<li>--%>
    <%--<i class="fa fa-home"></i>--%>
    <%--<a href="index">--%>
    <%--首页--%>
    <%--</a>--%>
    <%--</li>--%>
    <%--</ul>--%>
    <%--<!-- END PAGE TITLE & BREADCRUMB-->--%>
    <%--</div>--%>
    <%--</div>--%>
    <div class="row" style="margin-left: 17px;margin-right: 17px">
        <div class="row search-form-default">
            <div class="col-md-12">
                <form class="form-inline" action="#">
                    <div class="input-group">
                        <div class="input-cont">
                            <input id="friendName" type="text" placeholder="查询..." class="form-control"/>
                        </div>
                    <span class="input-group-btn">
                        <button type="button" class="btn green">
                            查询 &nbsp; <i class="m-icon-swapright m-icon-white"></i>
                        </button>
                    </span>
                    </div>
                </form>
            </div>
        </div>
        <div class="table-responsive" style="margin-bottom: 0">
            <table class="table table-striped table-bordered table-advance table-hover">
                <thead>
                <tr>
                    <th>
                        头像
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        邮箱
                    </th>
                    <th>
                        手机号
                    </th>

                    <th>
                        职业
                    </th>
                    <th>
                        状态
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="friend" items="${friendList}">
                    <tr>
                        <td>
                            <img src="${friend.user.userBaseInfo.photoUrl}" style="width: 33px;height: 33px"
                                 alt="${friend.user.userName}"/>
                        </td>
                        <td>
                                ${friend.user.userName}
                        </td>
                        <td>
                                ${friend.user.userBaseInfo.email}
                        </td>
                        <td>
                                ${friend.user.userBaseInfo.phone}
                        </td>

                        <td>
                                ${friend.user.userBaseInfo.career}
                        </td>
                        <td>
                            <span class="label label-sm <c:if test="${friend.onLine==1}">label-success</c:if><c:if test="${friend.onLine==0}">label-default</c:if>">${friend.showOnLine}</span>
                        </td>
                        <td>
                            <a class="btn red btn-xs green-stripe" href="javascript:"
                               onclick="top.chatFriend(${friend.user.id},'${friend.user.userName}')">
                                发送信息
                            </a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- END CONTENT -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script src="assets/scripts/core/app.js"></script>
<script src="assets/scripts/custom/search.js"></script>
<script>
    jQuery(document).ready(function () {
        App.init();
        $("button").click(reLoad);

        $("#friendName").keypress(function (e) {
            if (e.which == 13) {
                reLoad();
                return false; //<---- Add this line
            }
        });
    });

    function reLoad() {
        location.href = "friend/myFriendDo?friendName=" + $("#friendName").val();
    }

    function addFriend(id) {
        $.ajax({
            url: "friend/addFriend",
            data: {
                friendId: id
            },
            dataType: "json",
            type: "POST",
            success: function (r) {
                if (r) {
                    parent.bootbox.alert("已发送好友申请！");
                    parent.initTopFriends();
                } else {
                    parent.bootbox.alert("发送好友申请失败！");
                }
            },
            error: function () {
                parent.bootbox.alert("发送好友申请失败！");
            }
        })
    }
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>